<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-row>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="选择自变量与因变量" name="first">
        <el-row :spn="24">
          <el-card>
            <!-- 左侧表格 -->
            <el-col :span="8">
              <el-table
                ref="leftTable"
                :data="remainCol"
                row-key="name"
                style="wide: 100%"
                height="400"
                :row-style="{ height: '10px' }"
                :cell-style="{ padding: '5px 0' }"
                @selection-change="handleLeftSelection"
              >
                <el-table-column type="selection" :reserve-selection="true"/>
                <el-table-column label="列名" width="80" prop="columnName"/>
                <el-table-column
                  label="类型"
                  width="80"
                  prop="type"
                />
              </el-table>
            </el-col>
            <!--右侧表格-->
            <el-col :span="14">
              <el-row>
                <el-col :span="4">
                  <div
                    style="
                    height: 200px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                  "
                  >
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-d-arrow-right"
                      circle
                      @click="addXCol"
                    />
                  </div>
                </el-col>
                <el-col :span="20">
                  <el-table
                    :data="formModel.config.indVar"
                    row-key="name"
                    style="wide: 100%"
                    height="200"
                    :row-style="{ height: '10px' }"
                    :cell-style="{ padding: '5px 0' }"
                  >
                    <el-table-column label="选择自变量">
                      <el-table-column label="列名" width="80" prop="columnName"/>
                      <el-table-column label="类型" width="80" prop="type"/>
                      <el-table-column label="操作" width="80">
                        <template #default="scope">
                          <el-button
                            size="mini"
                            type="danger"
                            @click="deleteXCol(scope.$index, scope.row)"
                          >删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <div
                    style="
                    height: 200px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                  "
                  >
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-d-arrow-right"
                      circle
                      @click="addYCol"
                    />
                  </div>
                </el-col>
                <el-col :span="20">
                  <el-table
                    row-key="name"
                    :data="formModel.config.depVar"
                    style="wide: 100%"
                    height="200"
                    :row-style="{ height: '10px' }"
                    :cell-style="{ padding: '5px 0' }"
                  >
                    <el-table-column label="选择因变量">
                      <el-table-column label="列名" width="80" prop="columnName"/>
                      <el-table-column label="类型" width="80" prop="type"/>
                      <el-table-column label="操作" width="80">
                        <template #default="scope">
                          <el-button
                            size="mini"
                            type="danger"
                            @click="deleteYCol(scope.$index, scope.row)"
                          >删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </el-col>
          </el-card>
        </el-row>
      </el-tab-pane>
      <!--tableContentData 是表格里面的数据 tableTitleData是列名以及与tableContentData里面的数据对应渲染的prop-->
      <el-tab-pane label="配置参数" name="second">
        <div>
          <el-divider content-position="left">基本选项</el-divider>
          <el-form :inline="true">
            <el-form-item label="neighbors" label-width="100px">
              <el-input v-model="logicalform.n_neighbors" placeholder="0 - x" @change="handle_n_neighbors" />
            </el-form-item>
            <el-form-item label="leaf_size" label-width="100px">
              <el-input v-model="logicalform.leaf_size" placeholder="0 - x" @change="handle_leaf_size"/>
            </el-form-item>
            <el-form-item label="p" label-width="100px">
              <el-input v-model="logicalform.p" placeholder="0 - x" @change="handle_p"/>
            </el-form-item>
            <el-form-item label="n_jobs" label-width="100px">
              <el-input v-model="logicalform.n_jobs" placeholder="0 - x" @change="handle_n_jobs"/>
            </el-form-item>
            <el-form-item label="weights">
              <el-select v-model="logicalform.weights" placeholder="请选择类型" @change="handle_weights">
                <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="algorithm">
              <el-select v-model="logicalform.algorithm" placeholder="请选择类型" @change="handle_algorithm">
                <el-option v-for="item in options2" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="metric">
              <el-select v-model="logicalform.metric" placeholder="请选择类型" @change="handle_metric">
                <el-option v-for="item in options3" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div align="end" class="div1">
          <el-button type="info" round @click="dialogVisible1 = true">点击查看功能说明</el-button>
        </div>
        <el-dialog
          v-dialogDrag
          title="提示"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose"
          :close-on-click-modal="false"
          append-to-body
        >
      <span>幸福，时时刻刻围绕在你的周围：如果你与母亲逛街，心存温馨，那就是幸福；如果你在课堂上，在老师的指引下，遨游在知识海洋，那就是幸福；如果你在朦胧的灯光下，静静看书，凝神遐想，那就是幸福……

        假日，我陪母亲逛街。我喜欢稍后一步跟随着母亲，凭她老人家带着我在街巷左拐右折。母亲带我来到一家点心铺，从腰中掏出一张面额不小的钞票，非要我和那几个小孩坐在同一条长凳上吃点心。于是，我便擎着小碗加入了那几个小孩的行列，大嚼大咽起来。母亲则在一旁微笑着。陪母亲逛街，是件多么幸福的事啊！母亲怜爱我，纵宠我，不为别的，就因为我是她女儿。我眼中流动的是她昨日的眼神，我眉梢挑着的是她今日的骄矜。在母亲的心目中，我的一颦一笑一啄一饮都是天大的事。我拈起一片快乐的红叶，母亲便拥有整座枫林；我咽下一滴苦涩的海水，母亲便坠入了汪洋大海。拥有母亲，便拥有幸福。与母亲相伴，幸福的琼浆便汩汩流出。

        清晨，语文老师风风火火地走进了教室，他和蔼可亲，看着艾米丽的《呼啸山庄》。我喜欢看书，更喜欢看书给我带来的幸福。</span>
          <div style="float: right; margin-top: 10px; margin-bottom: 20px">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
          </div>
        </el-dialog>
        <div style="float: right; margin-top: 10px; margin-bottom: 20px">
          <el-button type="info" @click="handlereset">重置</el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane label="结果显示" name="third">
        <div class="demo-input-suffix">
          准确率：
          <el-input v-model="accuary"></el-input>
        </div>
      </el-tab-pane>

      <el-tab-pane label="绘制图形" name="fourth">
        <!--选择两个列信息-->
        <el-row :span="24">
          <el-col :span="3">
            <el-tag type="success">选择两列数据:</el-tag>
          </el-col >
          <el-col :span="20">
            <el-checkbox-group v-model="chartCheckList" >
              <div  v-for="(item,index) in formModel.config.indVar" :key="index" style="float:left;margin-left:5px;margin-top:5px;padding-left:5px;">
                <el-tooltip class="item" effect="dark" :content="item.columnType" placement="top">
                  <el-checkbox :label="item.columnName" :disabled="item.disabled" border>
                    {{item.columnName}}
                  </el-checkbox>
                </el-tooltip>
              </div>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <!--选择两个列信息 end-->
        <el-divider> </el-divider>
        <!--绘制图形按钮 start-->
        <el-row :span="24" style="margin-bottom: 10px;margin-top: 10px">
          <el-col :span="4" :offset="20">
            <el-button type="primary" @click="handleDrawScatter" >绘制图形</el-button>
          </el-col>
        </el-row>
        <!--绘制图形按钮 end-->
        <!--echart画图 start-->
        <el-row :span="24">
          <el-card>
            <echart-scatter ref="chartScatter" :scatterData="getScatterData" style="height:350px;" ></echart-scatter>
          </el-card>
        </el-row>
        <!--echart画图 end-->
      </el-tab-pane>
    </el-tabs>
    </el-row>
    <!--对话框按钮-->
    <el-row>
    <div style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </div>
    </el-row>
  </el-dialog>

</template>

<script>

  import echartScatter from "@/views/system/flow/workbench/platformComponents/Chart/echartUtilComponent/echartScatter";
  import SingleCsvInputNode from "../publicComponents/SingleCsvInputNode.js"
  import axios from 'axios'
  import { getScatterChartDataApi} from "@/api/ChartApi";

  export default {
    name: 'knnClassify',
    inject: ['root','flowchartId'],
    components: { echartScatter },
    props: [
      'dialogVisible'
    ],
    mixins:[SingleCsvInputNode],
    data() {
      return {
        /**
         * 绘图相关数据参数
         */
        // 保存绘图选择的列信息
        chartCheckList:[],
        // api/ChartApi 调用散点图后端获取的返回数据
        getScatterData:[],
        // api/ChartApi接口请求参数
        getScatterChartDataParas:[{
          "column1":"",
          "column2":""
        }],
        flowchartNum:'',
        res:'',
        accuary:'',
        nodeName:'',
        activeName: 'first',
        inputData:[],
        leftSelection: [],
        logicalform:{
          n_neighbors: '',
          leaf_size: '',
          p: '',
          n_jobs:'',
          weights: '',
          algorithm:'',
          metric:''
        },
        options1: [
          {
            value: 'uniform',
            label: 'uniform'
          }, {
            value: 'distance',
            label: 'distance'
          }, {
            value: '自定义函数',
            label: '自定义函数'
          }],
        options2: [
          {
            value: 'brute',
            label: 'brute'
          }, {
            value: 'kd_tree',
            label: 'kd_tree'
          }, {
            value: 'ball_tree',
            label: 'ball_tree'
          }],
        options3: [
          {
            value: 'euclidean',
            label: 'euclidean'
          }, {
            value: 'manhattan',
            label: 'manhattan'
          }, {
            value: 'chebyshev',
            label: 'chebyshev'
          }, {
            value: 'minkowski',
            label: 'minkowski'
          }],
        dialogVisible1: false
      }
    },
    computed:{
      remainCol: function () {
        return this.inputData.filter(
          (item) =>
            // 不在自变量和因变量中
            !this.formModel.config.indVar.some(
              (config) => config.columnName === item.columnName
            ) &&
            !this.formModel.config.depVar.some(
              (config) => config.columnName === item.columnName
            )
        )
      }
    },
    created() {
      console.log('knn分类初始化了')
      const { getSelected } = this.root.propsAPI
      const Model = getSelected()[0].getModel()
      this.flowchartNum = this.flowchartId
      this.getAccuary()
      this.logicalform = Model.config.logicalForm
      this.nodeName = Model.id
    },
    methods: {
      // 根据选择的两个列信息绘制散点图信息
      // 根据选择的列信息,请求后端数据并进行绘图
      handleDrawScatter(){
        // 判断选择的列,是否满足绘图要求
        if (this.chartCheckList.length!=2) {

          this.$message({
            message: '只能选择两列数据,请重新选择',
            type: 'error'
          })
        } else {
          //将选择的X, Y赋值
          this.getScatterChartDataParas["column1"] = this.chartCheckList[0]
          this.getScatterChartDataParas["column2"] = this.chartCheckList[1]
          this.getScatterChartDataParas["nodeName"] = this.nodeName
          this.getScatterChartDataParas["flowchartId"] = this.flowchartNum
          getScatterChartDataApi(this.getScatterChartDataParas).then(response => {
            // console.log("######", response.data)
            //将返回数据赋值
            this.getScatterData = response.data
            let resdata = JSON.parse(JSON.stringify(response.data))
              // 调用echarDoubleLine组件方法
            this.$refs.chartScatter.drawScatterChart(resdata)
            })
          }
      },


      async getAccuary(){
        const { getSelected, update } = this.root.propsAPI
        const node = getSelected()[0]
        const Model = node.getModel()
        const response = await axios.post(
          `/api/Task/queryTaskStatus`,
          {
            flowchartId:this.flowchartNum,
            nodeId:Model.id, // 执行节点的id名字
            config: Model.config
          },
        )
        this.accuary = response.data.accuary
      },
      filterHandler(value, row, column) {
        // value是下拉菜单中选择的属性 row是每一行的列名和元素的对象 column是个列对象？？
        console.log('column:', column)
        const property = column['property']
        return row[property] === value
      },
      cancelMethod() {
        this.$emit('close-dialog')
      },
      // 对话框确定按钮,点击后关闭对话框，保存数据
      StoreDataMethod(e) {
        this.$emit('close-dialog')// 告诉父组件要修改管理窗口可视化的变量
        // 更新选择好的indvar和depvar到原有的模型 以便于再次打开knn分类组件的时候自变量和因变量处存放的仍然是上次选择好的值
        // 同时更新配置好的参数
        this.formModel.config.logicalForm = this.logicalform
        const { getSelected, update } = this.root.propsAPI
        const node = getSelected()[0]
        update(node, this.formModel)
      },
      handleClose(done) {
        this.$emit('close-dialog')
      },
      handleLeftSelection(val) {
        this.leftSelection = val
      },
      handlereset(){
        this.logicalform.n_neighbors = ''
        this.logicalform.leaf_size = ''
        this.logicalform.p = ''
        this.logicalform.n_jobs = ''
        this.logicalform.defaultselect = ''
        this.logicalform.weights = ''
        this.logicalform.algorithm = ''
        this.logicalform.metric = ''
      },
      addXCol() {
        this.leftSelection.forEach((selection) => {
          this.formModel.config.indVar.push(selection)
        })
        this.$refs.leftTable.clearSelection()
      },
      addYCol() {
        // this.leftSelection.forEach((selection) => {
        //   this.formModel.config.depVar.push(selection)
        // })
        if (this.leftSelection.length > 0) {
          this.formModel.config.depVar = []
          this.formModel.config.depVar.push(this.leftSelection[0])
        }

        this.$refs.leftTable.clearSelection()
      },
      deleteXCol(index, row) {
        console.log(index, row)
        this.formModel.config.indVar.splice(index, 1)
      },
      deleteYCol(index, row) {
        console.log(index, row)
        this.formModel.config.depVar.splice(index, 1)
      },
      handle_weights(val) {
        this.logicalform.weights = val
      },
      handle_n_neighbors(val){
        this.logicalform.n_neighbors = val
      },
      handle_leaf_size(val){
        this.logicalform.leaf_size = val
      },
      handle_p(val){
        this.logicalform.p = val
      },
      handle_n_jobs(val){
        this.logicalform.n_jobs = val
      },
      handle_algorithm(val){
        this.logicalform.algorithm = val
      },
      handle_metric(val){
        this.logicalform.metric = val
      }
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
